
<style lang="scss">
    @import '../scss/app.scss';

    .myApp {
        @include flexColumn('between', 'start');
    }
</style>

<template>
    <div class='myApp' :style='cpStyle'>
        <app-head></app-head>
        <app-content></app-content>
        <app-bottom></app-bottom>
    </div>
</template>

<script>
    import appHead from './appFrame/appHead.vue';
    import appContent from './appFrame/appContent.vue';
    import appBottom from './appFrame/appBottom.vue';
    import { mapState, mapMutations } from 'vuex';

    export default {
        name: 'myApp',
        computed: {
            //映射vuex状态
            ...mapState('appFrame', [
                'viewPortWidth',
                'viewPortHeight',
            ]),

            cpStyle () {
                return {
                    width: this.viewPortWidth + 'px',
                    height: this.viewPortHeight + 'px',
                }
            },
        },
        methods: {
            //映射vuex变更
            ...mapMutations('appFrame', [
                'setViewPortWidth',
                'setViewPortHeight',
            ]),

            //获取当前视口宽度
            getViewPortWidthDOM () {
                return document.documentElement.clientWidth;
            },
            //获取当前视口高度
            getViewPortHeightDOM () {
                return document.documentElement.clientHeight;
            },
            //设置视口
            setViewPortSize () {
                this.setViewPortWidth(this.getViewPortWidthDOM());
                this.setViewPortHeight(this.getViewPortHeightDOM());
            },
        },
        components: {
            appHead,
            appContent,
            appBottom,
        },
        mounted () {
            this.setViewPortSize();
            window.onresize = () => {
                this.setViewPortSize();
            }
        },
    }
</script>
